{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}
<div class="label-row">
  <label for={{@attr.name}} data-test-readonly-label>
    {{this.labelString}}
  </label>
  {{#if @attr.options.helpText}}
    <Hds::TooltipButton @text={{@attr.options.helpText}} aria-label="More information">
      <Hds::Icon @name="info" />
    </Hds::TooltipButton>
  {{/if}}
</div>
{{#if @attr.options.subText}}
  <p class="sub-text">{{@attr.options.subText}}</p>
{{/if}}

{{#if @attr.options.possibleValues}}
  <div class="control is-expanded field is-readOnly">
    <div class="select is-fullwidth">
      <select name={{@attr.name}} id={{@attr.name}} disabled readonly data-test-input={{@attr.name}}>
        <option selected="true" value={{@value}}>
          {{@value}}
        </option>
      </select>
    </div>
  </div>
{{else}}
  <input
    data-test-input={{@attr.name}}
    id={{@attr.name}}
    autocomplete="off"
    spellcheck="false"
    value={{@value}}
    disabled={{true}}
    readonly
    class="field input is-readOnly"
    type={{@attr.type}}
  />
{{/if}}